// @import 'reset.scss';
@import 'reset';

h1 {
  background-color: pink;
  color: blue;
  transition: 1s;
}
/* css注释 */


div {
  width: 300px;
}

// 计算
.header {
  height: 200px - 10px;
  width: 100px * 3;
  font-size: (30px / 50px)em;
}

// 变量 #c81653  #c81654
$color: #c81654;

.header-top {
  background-color: $color;
}
.header-bot {
  color: $color;
}

// 复杂变量，相当于js中的数组，nth来使用，索引是从1开始
$colors: #666 #e00;

.header a {
  color: nth($colors, 1);
}
.header a:hover {
  color: nth($colors, 2);
}

$size: (10px 20px) (30px 40px 50px) (10px 20px 30px 40px);
.main {
  margin: nth($size, 1);
  padding: nth($size, 2);
  border-radius: nth($size, 3);
}

// 变量作为选择器的时候需要使用#{}
$pos: top;
.#{$pos} {
  font-size: 20px;
}

//嵌套
.footer {
  height: 200px;
  .top {
    color: #333;
    a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  > .bot {
    width: 300px;
  }
}

// 低权重样式
.section {
  height: 500px;
  &-top {
    height: 200px;
    &-title {
      font-size: 30px;
    }
  }
}

.aside {
  margin: {
    top: 20px;
    left: 30px;
  }
  background: {
    color: #d00;
    position: 200px 100px;

  }
}
// 混合：可以定义样式片段
// 可以传参，参数可以给默认值
@mixin center($px: 1000px) {
  width: $px;
  margin: {
    left: auto;
    right: auto;
  }
}

.nav {
  @include center;
}
.nav1 {
  @include center(400px);
}

// 继承
.center {
  @include center;
  color: #333;
}

.center1 {
  @extend .center;
  height: 100px;
}


// 函数
// 把px转换位rem
$baseFont: 16px;

@function pxToRem ($px) {
  @return ($px/$baseFont)rem;
}

.head {
  font-size: pxToRem(32px);
}

// 循环遍历
$titles: (h1: 40px, h2: 30px, h3: 20px);
@each $title,$font in $titles {
  #{$title} {
    font-size: $font;
  }
}
